{% extends "base.html" %}
{% block main %}
    <main >
        <div  class="main">
            <section>
                <div class="title">
                    <h3>基于深度学习的草莓成熟度检测模型</h3>
                </div>
            </section>
            <section>
                <div>
                    <input class="hidden" id="file_upload" type="file" accept="image/png, image/jpeg, image/gif">
                    <label for="file_upload" class="upload_box" id="file_drag">
                        <div id="upload_caption">拖动图片上传</div>
                        <img class="hidden" id="image_preview">
                    </label>
                </div>
            </section>

            <section>
                <div class="config">
                    <div>
                        <span>置信度:<input id="conf_value" type="text" value="25">%</span>
                        <div>
                            <input type="range" name="" id="conf" max="100" min="0" value="25">
                        </div>
                        <!--
                        <span id="line_width_value">线宽:3</span>
                        <div>
                            <input type="range" name="" id="line_width" max="5" min="1" value="3">
                        </div> -->
                    </div>


                    <div>
                        <button value="Submit" onclick="submitImage()">推理</button>
                        <button value="Clear" onclick="clearImage()">清除</button>
                    </div>
                </div>
            </section>

            <section class="show_box">
                    <div class="image_box" >
                        <h3 class="image_box_title hidden" >目标检测</h3>
                        <img id="image_detect"  class="hidden image_display">
                        <svg id="" class="loader hidden" viewBox="0 0 32 32" width="64" height="64">
                            <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
                        </svg>
                    </div>
{#                    <div class="image_box" >#}
{#                        <h3 class="image_box_title hidden">人物姿态</h3>#}
{#                        <img   id="image_pose" class="hidden image_display">#}
{#                        <svg id="" class="loader hidden" viewBox="0 0 32 32" width="64" height="64">#}
{#                            <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>#}
{#                        </svg>#}
{#                    </div>#}
                    <div class="image_box">
                        <h3 class="image_box_title hidden">实例分割</h3>
                        <img  id="image_segment"  class="hidden image_display">
                        <svg id="" class="loader hidden" viewBox="0 0 32 32" width="64" height="64">
                            <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
                        </svg>
                    </div>
            </section>
        </div>
    </main>
{% endblock %}